iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0

菜菜菜的 Vue 30天 - Day21

好的在今天之前所寫的章節使用 Vue 的方式是引入 CDN 來做使用,但是這樣開發實在還是沒有這麼方便。

而有一個工具 Vue-cli 他整合了 webpackbabel...等工具,並使用 npm 做套件管理,讓開發者能夠更專注的在開發上。

後面就來介紹如何使用~

使用版本: 2.9.1 (因為還沒碰 3.0 哈哈)

vue-cli 安裝

安裝的方式有很多,這邊就介紹使用 npm 的方式執行安裝:

npm install -g vue-cli

建立專案

安裝後我們就可以來創建 Vue 專案了,那創建專案的方式如下:

vue init <template-name> <project-name>

//template-name: 創建的專案類型
//project-name: 專案的名稱

專案類型的部分能夠使用以下指令來查看:

vue list

那一般我們都是使用 webpack 版的來執行開發,若要開發 pwa 也能夠選擇 pwa 喲~

開始建立專案後會有幾個選項要選

  1. project name //專案名稱
  2. project description //專案描述
  3. author //擁有者
  4. vue build //compiler 的選擇
  5. Install vue-router? //是否安裝 vue-router
  6. Use ESLint to lint your code? //是否使用 ESLint
  7. Set up unit tests //是否使用 unit test
  8. Setup e2e tests with Nightwatch? //是否使用 e2e test
  9. Should we run npm install for you after the project has been created? 可以選擇使用 npm or yarn 進行套件管理

專案架構

完成安裝之後就能夠到專案的目錄執行指令開啟本地伺服器

cd test             //切到專案目錄
npm install         //安裝 npm 套件,初始專案必須執行 npm install 安裝相依套件
npm run dev         //開啟本地伺服器

執行後就能夠在本地端的 8080 port 開啟本地的網頁


上一篇
slot
下一篇
vue-cli(專案架構)
系列文
菜菜菜的 Vue 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言